<template>
  <div class="oneMap">
    <div class="simulation_list">
      <a-select
        class="selectGate"
        v-model:value="state.selectValue1"
        style="width: 140px"
      >
        <a-select-option value="za1">水资源配置模型</a-select-option>
        <a-select-option value="za2">洪水预报模型</a-select-option>
        <a-select-option value="za3">水动力模型</a-select-option>
        <a-select-option value="za4">排灌模型</a-select-option>
      </a-select>
      <a-select
        class="selectGate"
        v-model:value="state.selectValue2"
        style="width: 240px; margin-left: 10px"
      >
        <a-select-option value="za1">20240921预演方案</a-select-option>
        <a-select-option value="za2">20240922预演方案</a-select-option>
        <a-select-option value="za3">20240924预演方案</a-select-option>
      </a-select>
    </div>
    <CesiumCommon />
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import CesiumCommon from "./cesium-common/index.vue";

defineOptions({ name: "simulationPreview" });

const state = reactive({
  name: "vue3",
  selectValue1: "za1",
  selectValue2: "za1",
});
</script>

<style lang="less" rel="stylesheet/less" scoped>
.darkBorder() {
  border: 1px solid;
  border-image-source: linear-gradient(
    181deg,
    rgba(6, 183, 253, 0.4) 3.03%,
    #51fbff 47.23%,
    rgba(6, 183, 253, 0.4) 91.41%
  );
  background: #003e7e6b;
  outline: none;
  box-shadow: 0px 0px 12px 0px #06b7fdcc inset;
  color: #fff;
}

.oneMap {
  width: 100%;
  height: 100%;
  position: relative;
  .wrapBG {
    width: 100%;
    height: 100%;
    background: url(@/assets/images/bg.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    z-index: 100;
    pointer-events: none;
  }
  .simulation_list {
    z-index: 110;
    position: absolute;
    left: 80px;
    top: 80px;

    :deep(.ant-select) {
      .ant-select-selector {
        .darkBorder();

        .ant-select-selection-overflow {
          .ant-select-selection-overflow-item {
            .ant-select-selection-item {
              background: transparent;
              border: 1px solid #999;

              .ant-select-selection-item-remove {
                color: #fff;
              }
            }
          }
        }
      }

      .ant-select-arrow {
        color: #fff;
      }
    }
  }
}
</style>
